<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>draw.io Search</title>
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.7.1/css/aui.css" media="all">
<style type="text/css">
html, body {
	height:100%;
	overflow:hidden;
}
body {
	font-family:Arial,sans-serif;
	width:100%;
	margin: 0;
	padding: 10px !important;
	background-color: #fff;
}
.btn {
	float: right;
	margin: 2px;
}
.diagramName {
	padding-right: 3px;
}
.gridHeader, .gridRow {
	border: 1px solid #e9e9e9;
	height: 40px;
}

.gridHeader>.gridHeaderCell {
    border-top: 0;
    border-bottom: 0;
    padding-left: 4px;
    text-align: left;
}

.gridHeader>.gridHeaderCell:first-child {
    border-left: none;
}

.gridHeader>.gridHeaderCell:last-child {
    border-right: none;
}

.gridHeader {
    background: #e5e5e5;
    color: black;
}

.gridRowCell {
    border-left: 1px solid #f3f3f3;
    padding-left: 4px;
}

.gridRow>.gridRowCell {
    background: #fff;
}

.gridRowAlt>.gridRowCell {
    background: #f5f5f5;
}

#searchTxt {
	width: 350px;
	height: 30px;
}
.content {
    max-width: 900px;
    margin: auto;
}
</style>
</head>
<body>
<div class="content">
  <h1>draw.io Diagrams</h1>
  <div style="padding: 10px 0 10px">
	<input id="searchTxt" type="search" placeholder="Search draw.io diagrams content"> <button id="searchBtn" class="aui-button">Search</button>
  </div>
  <div id="resultsPanel"></div>
</div>
<script src="search.js" type="text/javascript"></script>
</body>
</html>
